<template>
	<view class="sbody">
		<!-- 普通用户查看报修进度 -->
		<view>
			<view class="detail_list">
				<view class="detail_item">
					<text>报修单号：</text>
					<text class="detail_item_infos" style="color:#1884eb;">{{recordList.serviceId}}</text>
				</view>
				<view class="detail_item">
					<text>服务时间：</text>
					<text class="detail_item_infos">{{recordList.serviceTime}}</text>
				</view>
				<view class="detail_item">
					<text>状 态：</text>
					<view>
						<view v-for="item in statusOptions">
							<text class="detail_item_infos" style="color:#1884eb;"
								v-if="item.dictValue == recordList.serviceStatus && recordList.serviceStatus != 1">{{item.dictLabel}}</text>
						</view>
						<view v-for="item in statusOptions">
							<text class="detail_item_infos" style="color:#00d8a0;"
								v-if="item.dictValue == recordList.serviceStatus && recordList.serviceStatus == 1">{{item.dictLabel}}</text>
						</view>
					</view>
				</view>
				<view class="service_info">维修人员信息：</view>
				<view class="detail_item">
					<text>姓名：</text>
					<text class="detail_item_infos" v-if="recordList.serviceName != null">{{recordList.serviceName}}</text>
				</view>
				<view class="detail_item">
					<text>状 态：</text>
					<view>
						<view v-for="item in statusOptions">
							<text class="detail_item_infos" style="color:#1884eb;"
								v-if="item.dictValue === recordList.serviceStatus">{{item.dictLabel}}</text>
						</view>
					</view>
				</view>
				<view class="detail_item">
					<text>联系电话：</text>
					<text class="detail_item_infos">{{recordList.servicePhone}}</text>
				</view>
				<view class="detail_item_des">
					<text>维修反馈：</text>
					<text class="detail_item_info" v-if="recordList.remark === null">暂无</text>
					<text class="detail_item_info" v-else>{{recordList.remark}}</text>
				</view>

				<view class="submitButton" v-if="recordList.serviceStatus === '1'"
					style="display: flex;justify-content: flex-end;">
					<button :disabled="true" style="width: 90%; background-color: #a3d1fe;color: white;">待完成</button>
				</view>
			</view>
			<view class="submitButton" v-if="recordList.serviceStatus === '2'"
				style="display: flex;justify-content: flex-end;">
				<button @click="openPupop" style="width: 90%; background-color: #1884eb;color: white;">评价该技师</button>
			</view>
			<view class="submitButton" v-if="recordList.serviceStatus === '2' && recordList.serviceEvaluate != undefined"
				style="display: flex;justify-content: flex-end;">
				<button :disabled="true" style="width: 90%; background-color: #a3d1fe;color: white;">已完成评价</button>
			</view>
		</view>
		<!-- 完成弹出框 -->
		<uni-popup class="finish-popup" ref="popup" type="center">
			<view class="uni-popup__wrapper center">
				<view class="popup_box">
					<view class="popup_box_list">
						<view style="margin-top: 10px;">
							<view class="popup_box_over">评价服务</view>
						</view>
					</view>
					<view class="popup_box_list">
						<text style="margin-left: 20px;">备注：</text>
						<view class="register-remark">
							<textarea v-model="remark" class="register_input_textarea"
								placeholder="请对维修结果进行评价"></textarea>
						</view>
					</view>
					<view class="popup_box_list">
						<text style="margin-left: 20px;">评价：</text>
						<view class="box_list_star">
						<uni-rate color="#ececec" v-model="value" :size="20" @change="onChange"></uni-rate>
						</view>
					</view>
					<button type="default" @click="evaluateClick"
						style="width: 90%; background-color: #1884eb;color: white;margin-bottom: 10px;">完成</button>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import {
		getRecord,
		addEvaluate,
		updateRecord
	} from '@/common/js/api/serviceRecord.js';
	import {
		getDicts
	} from '@/common/js/api/dict/data.js';
	import {
		listUser
	} from '@/common/js/api/user.js';

	export default {
		data() {
			return {
				recordList: [],
				//服务状态字典
				statusOptions: [],
				//维修人员列表
				servicerList: [],
				//缴费类型字典
				typeOptions: [],
				//登陆人员基本信息
				userInfo: [],
				value: 5,
				serviceId:''
			}
		},
		onLoad(options) {
			this.serviceId = options.serviceId
			this.getServiceListById(this.serviceId)
			this.getDictsList()
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			onChange(e) {
				console.log('rate发生改变:' + e.value)
				this.value = e.value
			},
			//获取报修详情
			getServiceListById(serviceId) {
				getRecord(serviceId).then(res => {
					this.recordList = res.data
				})
			},
			//获取字典信息
			getDictsList() {
				getDicts('t_service_status').then(res => {
					this.statusOptions = res.data
				});
				getDicts('t_staff_type').then(res => {
					this.typeOptions = res.data
				})
			},
			openPupop() {
				this.$nextTick(function() {
					this.$refs.popup.open()
				})
			},
			evaluateClick() {
				let data = {
					'serviceId': this.serviceId,
					'remark':this.recordList.remark + '\n' + this.recordList.userName + this.remark,
					'serviceEvaluate':this.value-1,
				}
				console.log(data);
				addEvaluate(data).then(res => {
					//报修记录页面
					uni.navigateBack({
						delta: 1
					});
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.detail_list {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: white;
	}

	.detail_item {
		width: 90%;
		height: 20%;
		padding-top: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #999999;
		font-size: 14px;
	}

	.detail_item_img,
	.detail_item_des {
		width: 90%;
		height: 25%;
		display: flex;
		padding-top: 20px;
		flex-direction: column;
		justify-content: space-between;
		color: #999999;
		font-size: 14px;
	}

	.detail_item_des {
		margin-bottom: 200px;
	}

	.img {
		padding-top: 20px;
	}

	.detail_item_img image {
		width: 80px;
		height: 80px;
		border-radius: 5px;
	}

	.detail_item_infos {
		color: #000000;
		font-size: 14px;
	}

	.detail_item_info {
		color: #000000;
		font-size: 14px;
		word-break: break-all;
		padding-top: 20px;
	}

	.service_info {
		width: 90%;
		padding-top: 20px;
		display: flex;
		justify-content: space-between;
	}

	.submitButton {
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: fixed;
		bottom: 40px;
	}


	.popup_box {
		width: 100%;
		height: 40%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		background-color: white;
		border-radius: 10rpx;
	}


	.popup_box_top {
		width: 90%;
		height: 15%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popup_box_list {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.box_list_line {
		width: 90%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.checked_radio_checked {
		color: #1884eb;
	}

	.register-remark {
		width: 90%;
		background-color: #eeeeee;
		margin: auto;
		margin-top: 20px;
		border-radius: 5px;
	}

	.register_input_textarea {
		height: 100px;
		padding: 15px 0px 0px 15px;
		font-family: PingFang SC;
		color: #999999;
		font-size: 12px;
	}
	
	.box_list_star{
		width: 90%;
		margin: auto;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.popup_box_over {
		color: #000000;
		font-size: 16px;
		text-align: center;
		font-weight: bold;
	}
</style>
